// 组件 & Props：组件定义，props传值
// State & 生命周期：状态与属性十分相似，但是状态是私有的，完全受控于当前组件。
import React from 'react';

const myStyle = {
    fontSize:20,
    color:'white',
    background:'black',
    padding:15,
    margin:15,
}

// function Datetime(props) {
//     return <p style={myStyle}>Hi,{props.name}。It is {props.date.toLocaleTimeString()}</p>
// }

// 将Datetime组件(函数)转换为类：为了使用(改变)类的局部状态
class Datetime extends React.Component{
    // 添加构造函数，初始化 this.state：构造函数是唯一能够初始化 this.state 的地方
    constructor(props){
        super(props);//子类在构造函数中使用this,需要先调用super
        this.state = {date: new Date()};
    }

    //声明一些周期函数处理一些事情
    // 组件挂载：DOM初次加载
    componentDidMount() {
        this.timerID = setInterval(()=>this.tick(),1000)
    }
    // 组件卸载：DOM被移除时
    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    // 自定义方法
    tick(){
        // 改变state的值，使用setState
        this.setState({
            date:new Date()
        })
        // this.state.date = new Date();//直接更新状态 无效
    }

    handleClick(name,e){
        console.log('clicked '+name)
    }

    render(){
        return <p onClick={this.handleClick.bind(this,this.props.name)} style={myStyle}>Hi,{this.props.name}。It is {this.state.date.toLocaleTimeString()}</p>
    }
}


function Helo(props) {
    let arr = []
    for(let i=0;i<props.member.length;i++){
        arr.push(<Datetime key={i} name={props.member[i]} />)
    }
    return (
        <div>{arr}</div>
    )
}

export default Helo